var TETRIS_WIDTH = 30;
var TETRIS_HEIGHT = 30;
var panel = "#game_panel";
var uid =0 ;


Square = function(cls,text)
{
	text = text || '';
	text = '';
	var defaultCls = null;
	this.cls = cls||defaultCls;
	this.dom = null ;
	this.position = [] ;
	this.added = false;
	
	this.draw=function(x, y,returnDom){
		if( this.cls != null)
		{
			//g.drawImage(this.image,x,y);
			this.dom = this.dom || $('<div class="square">'+(text)+'</div>')
						.addClass(this.cls+'-square');
			this.position = [x,y];
			this.dom.css({left:x+'px',top:y+'px'});
			if (returnDom === true) {
				return this.dom ;
			} else if (!this.added){
				$(panel).append(this.dom);
				this.added = true ;
			}
		}
	};
	
	this.setCls = function(cls){
		this.cls = cls ;
	}
	this.remove = function(useAnimate){
		//this.dom && this.dom.remove();
		if (useAnimate === true){
			
			this.dom && this.dom.animate({
			    width: 'toggle',
			    height: 'toggle'
			  }, {
			    duration: 500,
			    
			    complete: function() {
			      $(this).remove();
			    }
			  });
		} else {
			this.dom && this.dom.remove();
		}
		this.dom = null;
		this.added = false ;
	}
	
	this.copy = function(s){
		this.cls = s.cls ;
		if (this.dom){
			this.dom.css({left:s.position[0]+'px',top:s.position[1]+'px'})
		}
	}
};


SquareGroup = function(options)
{	
	var defaults = { clsType:0,type:0,id:'uid'+(uid++),p:{x:120,y:-80} };
	var settings = $.extend(this, defaults, options);
	var bias=	[ 
	  			[ [0,1],[1,1],[2,1],[3,1] ],//0
				[ [1,0],[1,1],[1,2],[1,3] ],//1
				[ [0,0],[1,0],[0,1],[1,1] ],//2
				[ [0,0],[0,1],[1,1],[1,2] ],//3
				[ [1,0],[2,0],[0,1],[1,1] ],//4
				[ [1,0],[0,1],[1,1],[0,2] ],//5
				[ [0,0],[1,0],[1,1],[2,1] ],//6
				[ [0,0],[0,1],[0,2],[1,2] ],//7
				[ [0,0],[1,0],[2,0],[0,1] ],//8
				[ [0,0],[1,0],[1,1],[1,2] ],//9
				[ [2,0],[0,1],[1,1],[2,1] ],//10
				[ [1,0],[0,1],[1,1],[2,1] ],//11
				[ [0,0],[0,1],[1,1],[0,2] ],//12
				[ [0,0],[1,0],[2,0],[1,1] ],//13
				[ [1,0],[0,1],[1,1],[1,2] ],//14
				[ [0,0],[0,1],[1,1],[2,1] ],//15
				[ [0,0],[1,0],[0,1],[0,2] ],//16
				[ [0,0],[1,0],[2,0],[2,1] ],//17
				[ [1,0],[1,1],[0,2],[1,2] ]
				];//18
	
	var nextBias =	[[0,0], // 1
					 [0,0],  // 2
					 [1,1],  // 3
					 [1,0],  // 4
					 [0,1],  // 5
					 [1,0],  // 6
					 [0,1],  // 7
					 [1,0],  // 8
					 [0,1],  // 9
					 [1,0],  // 10
					 [0,0],  // 11
					 [0,1],  // 12
					 [1,0],  // 13
					 [0,1],  // 14
					 [1,0],  // 15
					 [1,1],  // 16
					 [1,1],  // 17
					 [0,1],  // 18
					 [1,0]]; // 19
	
	var offset = [
	              [[0,0],[-1,0],[0,-1],[0,0]],
	              [[0,0],[0,0],[-1,0],[0,-1]],
	              [[0,0],[-2,0],[-2,-2],[0,-2]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]],
	              [[0,0],[-2,0],[-1,-2],[0,-1]],
	              [[0,0],[-1,0],[-2,-1],[0,-2]]
	             ];
			
	this.classes =["blue","green","gray","yellow","pink","purple","red","red2","bottom"];

	var rotateType =[1,0,2,4,3,6,5,8,9,10,7,12,13,14,11,16,17,18,15];
	this.squares = new Array();
	this.orgType = null;
	
	
	var squareWidth,squareHeight;
	squareWidth = squareHeight = TETRIS_WIDTH ;
	
	this.init = function(){
		this.orgType =  this.type ;
		this.cls = this.classes[this.clsType];
		for( var i=0; i< 4 ; i++){
			this.squares[i] = new Square(this.cls,i);
		}
		this.degree = 0 ;
		
		this.dom = this.dom || $('<div id="'+this.id+'" class="group"></div>');
		this.dom.html("");
		for( var i=0; i< 4 ; i++)
		{
			this.dom.append(this.squares[i].draw( bias[this.type][i][0]*squareWidth, bias[this.type][i][1]*squareHeight,true));
		}
		this.dom.css('-webkit-transform','rotate('+this.degree+'deg)').css({left:this.p['x']+'px',top:this.p['y']+'px'});
	}
	this.init();
	$("#game_panel").append(this.dom);
	
	
	this.getOffset = function(){
		var position = offset[this.orgType][parseInt(this.degree+36000000)%360/90];
		return {left:this.p['x']+position[0]*TETRIS_HEIGHT+"px",top:this.p['y']+position[1]*TETRIS_HEIGHT+"px"};
	}

	this.rotate = function(deg)
	{
		this.type = rotateType[ this.type ];//System.out.println("OUT GROUP rotate");
		
		var block = this.dom;
		this.degree += deg||90 ;
		block.css('-webkit-transform','rotate('+this.degree+'deg)').css(this.getOffset());
		
	}
	this.rotateTo = function(deg)
	{
		var block = this.dom;
		this.degree = deg ;
		block.css('-webkit-transform','rotate('+this.degree+'deg)').css(this.getOffset());
		
	}
	
	this.draw = function(){
		this.dom.css(this.getOffset());
	}

	this.getRotateBias = function()
	{
		return bias[ rotateType[ this.type ] ];
	}

	this.getBias = function()
	{
		return bias[ this.type ];
	}

	this.getType = function()
	{
		return this.type;
	}
	

	this.moveDown = function(){
		
		this.p['y'] += TETRIS_WIDTH;
		
		
		
	}
	this.moveLeft = function(){
		this.p['x'] -= TETRIS_WIDTH;
	}
	this.moveRight = function(){
		this.p['x'] += TETRIS_WIDTH;
	}
	
	this.setPosition = function(p){
		this.p = p ;
	}
	this.getPosition = function(){
		return this.p;
	}
	
	this.applyPosition = function(p){
		this.setPosition(p);
		
		this.dom && this.dom.css({left:this.p['x']+'px',top:this.p['y']+'px'});

	}
	
	this.copy = function(group){
		this.cls = group.cls;
		this.clsType = group.clsType ;
		this.type = group.type ;
		
		this.init();
	}
	
	this.randomType = function(){
		var type = parseInt( Math.random()*( SquareGroup.TYPE_NUMS ) );
		var cls = parseInt( Math.random()*( SquareGroup.CLS_NUMS ) );

		this.clsType = cls ;
		this.type = type ;
		
		this.init();
	}
	
	this.remove = function(){
		for(var a in this.squares){
			this.squares[a].remove();
		}
	}
	
}
SquareGroup.TYPE_NUMS = 19;
SquareGroup.CLS_NUMS = 8;
